<template>
  <div class="wrap">
    <!--3行-->
    <div class="text" :line-clamp="props.maxLen">...</div>
    <!--5行-->
    <div class="text">
      <label class="btn" for="exp"></label
      ><!--去除按钮文字-->
      正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向
      正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向
      正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { computed, ref } from 'vue';
import { useProjectStore } from '@/store';

const textVisible = ref(false);
const store = useProjectStore();
const showBtn = ref(true);
const props = defineProps({
  tip: {
    type: String,
    default: '详情',
  },
  // 数据
  data: {
    type: String,
    default: '',
  },
  // 最大长度
  maxLen: {
    type: Number,
    default: 3,
  },
  maxMargin: {
    type: Boolean,
    default: true,
  },
});

if (el.scrollHeight > el.clientHeight) {
  // 文本超出了
  el.classList.add('trunk');
}
</script>

<style scoped lang="less">
.exp:checked + .text {
  -webkit-line-clamp: 999; /*设置一个足够大的行数就可以了*/
}
.exp:checked + .text {
  max-height: none;
}
.text {
  /*
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  */
  line-height: 1.5;
  overflow: hidden;
}
.exp:checked + .text {
  -webkit-line-clamp: 999; /*设置一个足够大的行数就可以了*/
}
[line-clamp='1'] {
  max-height: 1.5em;
}
[line-clamp='2'] {
  max-height: 3em;
}
[line-clamp='3'] {
  max-height: 4.5em;
}
[line-clamp='4'] {
  max-height: 6em;
}
[line-clamp='5'] {
  max-height: 7.5em;
}
[line-clamp='6'] {
  max-height: 9em;
}
[line-clamp='7'] {
  max-height: 10.5em;
}
[line-clamp='8'] {
  max-height: 12em;
}
[line-clamp='9'] {
  max-height: 13.5em;
}
.btn::after {
  content: '展开'; /*采用content生成*/
}
.exp:checked + .text .btn::after {
  content: '收起';
}
.exp:checked + .text .btn::before {
  visibility: hidden; /*在展开状态下隐藏省略号*/
}
.text {
  transition: 0.3s max-height;
}
.exp:checked + .text {
  max-height: 200px;
}
.text::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
}
.text::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: #fff;
}
.exp:checked + .text::after {
  visibility: hidden;
}
</style>
